<template>
	
	<div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>系统消息</div>
			<div @click="read">一键已读</div>
		</header>
		
		<div class="newslist">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="contentList">
				<li  v-for='item in newslist'>
					<div class="newslist_d" @click="newson(item.id)">
						<div>{{item.name}}<span v-if='item.isRead == "1"'></span></div>
						<div>{{item.content}}</div>
					</div>
				</li>
			</ul>
		</div>
		
		<div class="del" @click="del">一键删除</div>
		
	</div>
	
</template>

<script>
	import { Toast } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	export default{
		data(){
			return{
				token:'',
				id:'',
				newslist:[],
				index:0,
				loading:'',
				type:'',
			}
		},
		created(){
			this.id = this.$route.query.id;
			this.type = this.$route.query.type;
			this.token = localStorage.getItem('token');
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			newson:function(id){
				this.$router.push({
					path:'/newsdetailss?id=' + id
				})
			},
			singInfo(index){
				var url = BaseUrl + 'msg/list?token=' +this.token + '&appId=wap+&length=10&start=' + this.index + '&parentId=' + this.id;
				this.$http.post(url).then(res=>{
//					console.log(res.data.data);
					if(res.data.code == '10000'){
						this.newslist = this.newslist.concat(res.data.data.list);
						if(res.data.data.list == '') {
							this.loading = true;
							return;
						} else if(res.data.data.list != '') {
							this.loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
				
			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 1000);
				}
			},
			//阅读
			read:function(){
				var url = BaseUrl + 'msg/allRead?appId=wap' + '&token=' + this.token + '&type=' + this.type;
				this.$http.post(url).then(res=>{
//					console.log(res.data)
					if(res.data.code == '10000'){
						this.index = 0;
						this.newslist = [];
						this.singInfo(this.index)
						Toast({
							message: "一键阅读成功",
							position: 'middle',
							duration: 3000
						})
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//删除
			del:function(){
				var url = BaseUrl + 'msg/allDel?appId=wap' + '&token=' + this.token + '&type=' + this.type;
				this.$http.post(url).then(res=>{
					if(res.data.code == '10000'){
						this.index = 0;
						this.newslist = [];
						this.singInfo(this.index)
						Toast({
							message: "删除成功",
							position: 'middle',
							duration: 3000
						})
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 0.1px solid #E3E3E3;
		padding: 0 0.25rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.newslist{
		height: 12rem;
		overflow-y: auto;
		padding-bottom: 0.7rem;
	}
	.newslist_d{
		padding: 0.2rem 0.25rem;
		border-bottom: 1px solid #E2E2E2;
	}
	.newslist_d div:nth-child(1) span{
		display: inline-block;
		width: 0.2rem;
		height: 0.2rem;
		background: #ff2040;
		border-radius: 50%;
		margin-left: 0.2rem;
	}
	.del{
		width: 100%;
		text-align: center;
		color: #fff;
		padding: 0.2rem 0;
		font-size: 0.26rem;
		background: #ff2040;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>